<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/cookie.js"></script>
</head>

<body>
    <button class="btn">存储cookie</button>
    <button class="get">获取cookie</button>
</body>
<script>

    // 使用Cookie时需要注意
    // 1. 必须要有服务器环境  (本地文件不能)
    // 2. cookie不能跨浏览器  
    // 3. cookie不能跨网站
    // 4. 有些浏览器在使用中文时，会出现乱码。 
    // 解决方法:
    // 在存储cookie之前,先将中文编码之后在存储  encodeURIComponent();
    // 获取cookie是  先取值在解码  decodeURIComponent()

    // 5. cookie 的内容是纯文本，即只能保存字符串数据 (如果存储其他类型 会隐式的转化为字符串(数组和对象))。
    //  解决方法:  如何在不破坏原本数据结构的情况下将数据 存储到cookie中 
    // JSON.stringify()   将对象和数组转化为字符串
    // JSON.parse()       将对应的字符串 转化为 对象和数组

    var btn = document.querySelector(".btn");
    var getBtn = document.querySelector(".get");

    var list = [1, 2, 3, 4];
    var obj = { a: 1, b: 2 };




    btn.onclick = function () {

        setCookie("list", JSON.stringify(list));
        setCookie("obj", JSON.stringify(obj));


    }

    getBtn.onclick = function () {

        console.log(JSON.parse(getCookie("list")));
        console.log(JSON.parse(getCookie("obj")));


    }













</script>

</html>